import { useEffect, useRef, useState } from 'react'
import Header from '@/components/Header/index'
import Banner from './components/Banner/index'
import Swipers from './components/Swiper/index'
import Tab from './components/Tab/index'
import Bottom from '@/components/Bottom'
import Loading from '@/components/Loading'

import { GetHomeData } from '@/api/home'
import { useUnactivate, useActivate  } from 'react-activation'
import { ArrowDownCircleOutline } from 'antd-mobile-icons'
import style from './index.module.scss'

const Home = () => {
  const [loadingCode, setLoadingCode] = useState(1) // 1是加载中 2是网络超时  
  const [flag, setFlag] = useState(true) // 是否加载中 遮罩层
  const [banner, setBanner] = useState<[]>([]) // banner
  const [swiper, setSwiper] = useState<[]>([]) // swiper
  const [backTop, setBackTop] = useState(false) // 返回顶部
  const bannerSwiperRef = useRef<any>(null) // 获取bannerSwiper Dom 实例

  // 数据初始化 
  const init = async () => {
    const res = await GetHomeData().catch((err) => {
      if (err.code === 'ECONNABORTED' || err.code === 'ERR_NETWORK') setLoadingCode(2)
    })

    if(res?.status === 200) {
      setFlag(false)
      setBanner(res.data.slides) // 获得banner数据
      setSwiper(res.data.goods.data) // 获得banner数据
    } 
  }
    // 页面滚动 进行监听
    const handleScroll = () => {
      try {
        const height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        const bannerSwiperHeight = bannerSwiperRef.current.offsetHeight
        if(height > bannerSwiperHeight) {
          setBackTop(true) 
          document.getElementById('home')?.getElementsByClassName('adm-tabs-header')[0].classList.add(`${style.fixed}`)
        } else {
          setBackTop(false) 
          document.getElementById('home')?.getElementsByClassName('adm-tabs-header')[0].classList.remove(`${style.fixed}`)
        }
        } catch (error) {
        console.log(error)
      }
    }
  
    useEffect(() => {
      init()
      window.addEventListener('scroll', handleScroll)
  
      return () => { // 组件被缓存后, 不会走这个卸载组件的方法
        window.removeEventListener('scroll', handleScroll)
      }
    }, [])
  
    useActivate(() => {
      window.addEventListener('scroll', handleScroll)
    })
  
    // 组件缓存卸载的方法, 有执行, 但此次的监听事件并没有被卸载掉. 自己也很纳闷
    useUnactivate(() => { 
      window.removeEventListener('scroll', handleScroll)
    })


  return (
    <div id='home'>
      {/* 头部信息 */}
      <Header title='图书兄弟' backIcon={false} backPath=''></Header>

      {/* banner和swiper */}
      <div className={style.content} ref={bannerSwiperRef}>
        <Banner banner={banner}></Banner>
        <Swipers swiper={swiper}></Swipers>
      </div>

      {/* tab信息 */}
      <Tab></Tab>

      {/* tab信息 */}
      <Bottom></Bottom>

      {/* 加载中或者加载超时 */}
      {flag && <Loading loadingCode={loadingCode}></Loading>}

      {/* 返回顶部  */}
      { backTop && <ArrowDownCircleOutline className={style.back} onClick={ () => window.scrollTo(0,0) } /> }
    </div>
  )
}
export default Home